<template>
  <div>
    <div class="nx-content">
      <div class="flex-bet">
        <div class="left-title flex">
          <el-button type="primary" @click="back()">返回首页</el-button>
          <!-- <div class="etitle">历史数据</div> -->
        </div>
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-button @click="handleExport">导出历史数据</el-button>
        </el-form-item>
        </el-form>
      </div>
      <NxTable
      :table-cols="tableCols"
      :table-data="tableData"
      :pag-ination="pagination"
      class="table-wrap"
      @refresh="refresh"
    >
    </NxTable>
    </div>
  </div>
</template>
<script>
import NxTable from "@/components/NxTable.vue";
import { Page } from "@/utils/pagination";
import { getDataHisUnitList } from "@/api/filtration";

export default {
  components: {
    NxTable,
  },
  props: {
  },
  // 表格数据
  data() {
    return {
      // 查询字段
      searchForm: {
        id: "",
      },
      // 表格字段
    tableCols: [
      {
        label: "日期",
        prop: "companyName",
        align: "center",
      },
      {
        label: "时间",
        prop: "baseName",
        align: "center",
      },
      {
        label: "冲洗",
        slot: "deviceType",
        align: "center",
      },
      {
        label: "队列",
        prop: "value",
        align: "center",
      },
    ],
      tableData: [],
      pagination: new Page(),
      typeDialog: false,
      addEditIsDialog: false, // 添加编辑页面状态
      date: [], // 日期范围
    };
  },
// 初始化加载
mounted() {
      this.searchForm.id = this.$route.query.id;

      // 查询
      this.getList();
},
// 自定义方法
methods: {
 // 返回
 back(){
    this.$router.push({
      path: `/filtration/home`,
    });
  },
    // 查询
    onSubmit() {
      this.getList();
    },
    // 查询列表
    getList() {
      getDataHisUnitList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.pagination.count = res.data.total;
        }
      });
    },
  // 导出
  handleExport() {
/*       exportDataExperimentList(this.searchForm).then((res) => {
      if (res.code == 200) {
        window.open(res.data);
      }
    }); */
  },
  },
};
</script>
<style lang="less" scoped>
.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;
  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;
    .main-breadcrumb-home {
      cursor: pointer;
      color: #666666;
      font-weight: bold;
    }
    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}
.etitle {
  position: absolute;
  left: 2.13vw;
  color: black;
  font-size: 0.94vw;
}
.length {
  position: absolute;
  top: 5.28vw;
  right: 2.44vw;
  display: flex;
  align-items: center;
  .litem {
    display: flex;
    align-items: center;
    color: black;
    font-size: 0.73vw;
    margin-left: 2.1vw;
    img {
      width: 0.94vw;
      height: 1.1vw;
      margin-right: 0.5vw;
    }
    .line {
      width: 0.94vw;
      margin-right: 0.47vw;
      border-top: 1px dashed #00fcf9;
    }
  }
}
.flexc {
  display: flex;
  align-items: center;
  justify-content: center;

}
.echartline {
  width: 100%;
  height: 22vw;
  margin-top: 10.4vw;
}
</style>
